<template>
    <div class="cgs" :style="{backgroundImage: `url(${sysInfo.bgImg})`}">
        <div class="cgs-container find-container flex-col" style="height: 550px">
            <div class="cgs-container-title flex-col">
                <span class="info1 no-select">{{title}}</span>
                <span class="info2 no-select">WELCOME&nbsp;TO&nbsp;{{title}}</span>
            </div>
            <div class="cgs-input-div">
                 <span class="iconfont cgsIcon-phone" />
                <input v-model="telephone" @blur="handleInputBlur($event, 'telephone')" placeholder="请输入手机号码">
                <label><div v-if="telephoneLabel" class="label-span">!</div>{{telephoneLabel}}</label>
            </div>
            <div class="cgs-input-div">
                 <span class="iconfont cgsIcon-key" />
                <input v-model="safe" @blur="handleInputBlur($event, 'safe')" placeholder="请输入验证码">
                <button :class="buttonCheck" class="input-button" @click="getValidationCode">{{validationCodeText}}</button>
                <label><div v-if="safeLabel" class="label-span">!</div>{{safeLabel}}</label>
            </div>
            <div class="cgs-input-div">
                 <span class="iconfont cgsIcon-lock" />
                <input v-model="password" type="password" @blur="handleInputBlur($event, 'password')" placeholder="密码，6-20位">
                <label><div v-if="passwordLabel" class="label-span">!</div>{{passwordLabel}}</label>
            </div>
            <div style="margin-top: 30px">
                <el-button type="primary" @click="handleFindPassword">确定</el-button>
            </div>
            <div class="cgs-container-bottom">
                <span @click="$router.push({path: '/login'})">返回登录</span>
            </div>
            <a class="registration-info" href="http://beian.miit.gov.cn" target="_blank">{{registration}}</a>
        </div>
        <!-- <div class="cgs-bottom flex-row">
            <div class="cgs-bottom-triangle">
                <div class="cgs-bottom-down"></div>
                <div class="cgs-bottom-up"></div>
            </div>
        </div> -->
    </div>
</template>
<script>
    // import userFindPassword from "./userFindPassword";
    import {getPhoneValidationCode, checkValidationCode, findPassword, CheckByUsername} from "@/api/user";
    import {checkPhone} from "../../util/util";

    export default {
    name: "findPassword",
    components: {
    },
    data() {
      return {
          userName: "",
          password: "",
          telephone: "",
          safe: "",
          safeLabel: "",
          userLabel: "",
          passwordLabel: "",
          telephoneLabel: "",
          buttonCheck: "",
          validationCodeLoading: false,
          validationCodeText: "获取验证码",
      };
    },
    watch: {
    },
    created() {
    },
    mounted() {
    },
    computed: {
        title() {
            return this.$store.state.sysInfo.name.toUpperCase()
        },
        sysInfo () {
            return this.$store.getters.sysInfo
        },
        registration(){
            return this.$store.state.sysInfo.domainRegistrationInfo
        }
    },
    props: [],
    methods: {
        handleInputBlur (e, type, action) {
            let value = e;
            if (!action) {
                value = e.target.value
            }
            value = value.trim();
            let flag = true;
            switch (type) {
                case "telephone":
                    if (value === "" || !value) {
                        this.telephoneLabel = "请输入手机号码！"
                        flag = false;
                    } else if (!checkPhone(value)) {
                        this.telephoneLabel = "请输入正确的手机号码！"
                        flag = false;
                    } else {
                        this.telephoneLabel = ""
                    }
                    break;
                case "safe":
                    if (value === "" || !value) {
                        this.safeLabel = "请输入验证码！"
                        flag = false;
                    } else {
                        this.safeLabel = ""
                    }
                    break;
                case "password":
                    if (value === "" || !value) {
                        this.passwordLabel = "请输入密码！"
                        flag = false;
                    } else if (value.length < 6) {
                        this.passwordLabel = "密码少于6位！"
                    } else if (value.length > 20) {
                        this.passwordLabel = "密码大于20位！"
                    } else {
                        this.passwordLabel = ""
                    }
                    break;
            }
            return flag;
        },
        handleFindPassword () {
            let {telephone, safe, password} = this
            let flagPassword = this.handleInputBlur(password, 'password', true);
            let flagSafe = this.handleInputBlur(safe, 'safe', true);
            let flagTelephone = this.handleInputBlur(telephone, 'telephone', true);
            if ( flagPassword && flagSafe && flagTelephone) {
                checkValidationCode({
                    phoneNumber: this.telephone,
                    validationCode: this.safe
                }).then(res => {
                    if(res.data.success) {
                        findPassword({
                            "newPassword": password,
                            "confirmPassword": password,
                            "phoneNumber": telephone,
                            "validationCode": safe
                        }).then(res => {
                            if(res.data.success) {
                                this.$message.success("密码修改成功")
                                this.$router.push({path: "/login"});
                            }
                        })
                    } else {
                        this.$message.error(res.data.msg)
                        this.findPasswordForm.validationCode = ""
                    }
                })
            }
        },
        getValidationCode() {
            if (this.validationCodeLoading) {
                return;
            }
            let phone = this.telephone

          CheckByUsername({
            username: this.telephone
          }).then(res => {
                if (!res.data.data.isExist) {
                  this.telephoneLabel = "该用户不存在！"
                  return
                }
            //获取验证码
            getPhoneValidationCode({
              phoneNumber: phone
            })

            this.validationCodeLoading = true;
            let time = 60;
            this.reGetValidationCode(time, timeOut)
            let timeOut = setInterval(() => {
              --time
              this.reGetValidationCode(time, timeOut)
            },1000);
          })
        },
        reGetValidationCode(time, timeOut) {
            this.validationCodeText = time + "s";
            if (time === 0) {
                clearInterval(timeOut)
                this.buttonCheck = '';
                this.validationCodeText = "重新获取"
                this.validationCodeLoading = false
            }
        },
    }
  };
</script>

<style src="../login/index.css"></style>
<style src="../register/index.css"></style>
